
<template>
	<view class="nav">
		<!-- 搜索栏 -->
        <view class="search-bar">
		 <view class="search-bar-box">
		 <input type="text" value=""  placeholder="请输入驾校名称" class="search-text" maxlength="10" @click="onFocusInput" focus/>
		 <button class="search-btn">搜索</button>
		 </view>
	 </view>
	 <!-- 轮播图 -->
	<view class="home">
			<!--circular用来设置循环轮播   indicator-dots设置下面小圆点用来点击 -->
			<swiper circular indicator-dots :autoplay="autoplay" :interval="interval" :duration="duration">
				<!-- v-for循环遍历数组 -->
				<swiper-item v-for="item in swipers" >
					<image :src="item"></image>
				</swiper-item>
			</swiper>
	</view>
<!-- 选项卡 -->
   <view class="con">
	

	<view class="head-nav">
		      <view :class="navIndex==1?'activite':''" @click="checkIndex(1)">排行榜</view>
		      <view :class="navIndex==2?'activite':''" @click="checkIndex(2)">距离</view>
			  <view :class="navIndex==3?'activite':''" @click="checkIndex(3)">评价</view>
	</view>
	<!-- 内容切换 -->
	<view class="contents" v-if="navIndex==1" v-for="(item,index) in arr" :key="index">
		      <view class="cont"  @click="getDetails">
				  <view class="left">
				  	<image src="/static/signup/2.jpeg" alt="">
				  </view>
					<view class="right">
						<view class="name">
							<text>{{item.name}}</text>
						</view>
					  <view class="evaluate flex align-items-center">
					  	<template v-for="(val, index) in 5">
					  		<image
					  			
					  			class="img"
					  			:src="item.fraction > index ? '/static/signup/liang.png' : '/static/signup/null.png'"
					  			mode="aspectFill"
					  		></image>
					  	</template>
					  	<text>{{ item.fraction}}.0分</text>
					  </view>
					  <view class="price">
						<text>￥{{item.price}}元</text>
					  </view>
					</view>
			</view>
			<view class="clear"></view>
			
			
			<!-- <button @click="getMessage">发送get请求</button> -->
	</view>
	<view class="contents" v-if="navIndex==2" v-for="(item,index) in arr" :key="index">
		<view class="cont"  @click="getDetails">
			  <view class="left">
			  	<image src="/static/signup/2.jpeg" alt="">
			  </view>
				<view class="right">
					<view class="name">
						<text>{{item.name}}</text>
					</view>
				  <view class="evaluate flex align-items-center">
				  	<template v-for="(val, index) in 5">
				  		<image
				  			
				  			class="img"
				  			:src="item.fraction > index ? '/static/signup/liang.png' : '/static/signup/null.png'"
				  			mode="aspectFill"
				  		></image>
				  	</template>
				  	<text>{{ item.fraction}}.0分</text>
				  </view>
				  <view class="price">
					<text>￥{{item.price}}元</text>
				  </view>
				</view>
		</view>
	</view>
	<view class="contents" v-if="navIndex==3" v-for="(item,index) in arr" :key="index">
		<view class="cont"  @click="getDetails">
			  <view class="left">
			  	<image src="/static/signup/2.jpeg" alt="">
			  </view>
				<view class="right">
					<view class="name">
						<text>{{item.name}}</text>
					</view>
				  <view class="evaluate flex align-items-center">
				  	<template v-for="(val, index) in 5">
				  		<image
				  			
				  			class="img"
				  			:src="item.fraction > index ? '/static/signup/liang.png' : '/static/signup/null.png'"
				  			mode="aspectFill"
				  		></image>
				  	</template>
				  	<text>{{ item.fraction}}.0分</text>
				  </view>
				  <view class="price">
					<text>￥{{item.price}}元</text>
				  </view>
				</view>
		</view>
	</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swipers:[
						'/static/signup/1.jpeg',
						'/static/signup/2.jpeg',
						'/static/signup/3.jpeg',
				],
				navIndex:1,
				autoplay:true,
				interval:2000,
				duration:500,
				rateValue: 3,
				star: 4,//课程评价，默认5星,
				arr:[
					{name:"百合驾校",price:1899,fraction:4},
					{name:"必过驾校",price:3999,fraction:5},
					{name:"好运驾校",price:2899,fraction:3},
				],
				
					
				
				
			}
		},
		methods: {
			checkIndex(index){
			        this.navIndex =index;
			},
			//设置评分
			setStar: function(star) {
					this.star = star;
			},
			getDetails(){
				uni.navigateTo({
					url:"/pages/signup/details?id=101"
				})
			},
			getMessage(){
				uni.request({
					url:"http://43.139.5.112:9091/login",
					data:{
						uname:123,
						upwd:123456,
					},
					success(res){
						console.log(res)
					}
				})
			},
			onFocusInput: function(event) {
							uni.navigateTo({
								url:"/pages/signup/search"
							})
			},

		}
		
	}
</script>

<style>
	.search-bar{
		width: 100%;
		height: 100rpx;
		margin-top: 2%;
	}
	.search-bar-box{
		display: flex;
		margin: 0 auto;
		width: 620rpx;
		height: 60rpx;
		border:5rpx solid #1E90FF;
		border-radius: 50rpx;
	}
	.search-span{
		width: 100rpx;
		height: 56rpx;
		margin-top: 6rpx;
		margin-left: 30rpx;
	}
	.search-text{
		width: 100%;
		margin-top: 10rpx;
		margin-left: 20rpx;
		font-size: 25rpx;
		color: #7f7f81;
	}
	.search-btn{
		background-color: #1E90FF; /* Green */
		color: white;
		text-align: center;
		display: inline-block;
		font-size: 30rpx;
		width: 240rpx;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 30rpx;
		letter-spacing: 3rpx;
	}
	.home swiper{
		width: 90%;
		height: 300rpx;
		margin: 0rpx auto;
	}
	.home swiper image{
		width: 100%;
		height: 100%;
	}
	.con{
		width: 100%;
	}
	.head-nav{
	   width: 100%;
	   margin:20rpx auto;
	   display: flex;
	   justify-content: space-between;
	   align-items: center;
	 }
	 .activite{
	   font-weight: bold;
	   border-bottom: 6rpx solid #0065d9;
	 }
	 .head-nav>view{
	   padding-bottom: 10rpx;
	
	   margin: 0 auto;
	 }
	 .box{background: #008000;}
	 .contents{
		 width: 100%;
		 height: 150rpx;
		 
	 }
	 .clear:before,.clear::after{
		 content: "";
			clear: both;
	 }
	 .cont{
		 width: 100%;
		 height: 150rpx;
		 margin-top: 20rpx;
		 border-bottom: 1rpx solid #c4c4c4;
	 }
	.cont .left>image{
		width: 300rpx;
		height: 150rpx;
	}
	.left{
		float: left;
		width: 300rpx;
		height: 150rpx;
	}
	.right{
		width: 600rpx;
		height: 150rpx;
	}
	.right .name>text,.right .price>text{
		margin-left: 20rpx;
	}
	.right .price>text{
		color: #00BFFF;
	}
	.evaluate {
		font-size: 28rpx;
		font-weight: bold;
		color: #333333;
		margin-left: 30rpx;
		margin-top: 10rpx;
	}
	.evaluate .img {
			width: 30rpx;
			height: 30rpx;
			margin-left: 10rpx;
		}
	
	.evaluate>text {
			font-size: 28rpx;
			color: #c4c4c4;
			margin-left: 10rpx;
		}
	
	
	
</style>